<template>
  <div id="set">
      <van-button :type="buttonType" @click="toSetDebug">{{buttonText}}</van-button>
  </div>
</template>

<script>
import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);

export default {
    name: 'SetDebug',
    data(){
        return {
            buttonType: 'primary',
            buttonText: '打开调试'
        }
    },
    methods: {
        toSetDebug() {
            const DEBUG_FLAG  = localStorage.getItem("debugFlag") || 'false'
            if (DEBUG_FLAG == 'true') {
                localStorage.setItem("debugFlag", 'false')
                this.buttonType = 'primary'
                this.buttonText = '打开调试'
            } else {
                localStorage.setItem("debugFlag", 'true')
                this.buttonType = 'danger'
                this.buttonText = '关闭调试'
            }
        }
    },
    mounted(){
        // console.log(this.$route)
        const DEBUG_FLAG  = localStorage.getItem("debugFlag") || 'false'
        // console.log('DEBUG_FLAG', DEBUG_FLAG)
        if (DEBUG_FLAG == 'true') {
            this.buttonType = 'danger'
            this.buttonText = '关闭调试'
        } else {
            this.buttonType = 'primary'
            this.buttonText = '打开调试'
        }
    }
}
</script>

<style lang="scss" scoped>
    #set {
        display: flex;
        justify-content: center;
        margin-top: 80px;

        button {
            width: 240px;
            height: 100px;
        }
    }
</style>>